<!-- 申请中心 -->
<template>
  <view>
    <u-navbar title="申请中心" :autoBack="true" />
    <view style="margin-top: 160rpx"></view>
    <u-swiper
      :list="dataList"
      keyName="image"
      :height="state.swiperHeight + 'px'"
      imgMode="aspectFit"
      showTitle
      :autoplay="false"
      circular
    ></u-swiper>
    <view>
      <sxl-grid
        :gridList="filteredGridList"
        @iconClick="iconClick"
        :row="4"
      ></sxl-grid>
    </view>
  </view>
</template>

<script setup>
import { getBanner } from "@/api/userInfo.js";
import { onShow, onLoad } from "@dcloudio/uni-app";
import { showLoading, showToast } from "@/utils/toast";
import { getResource } from "@/utils/Resource.js";
import { ref, reactive, toRefs, computed } from "vue";

const state = reactive({
  dataList: [],
  newregType: "",
  swiperHeight: "",
});
const { dataList } = toRefs(state);

const gridList = reactive([
  {
    imgIcon: getResource("img/phone/mini/8ic/1.png"),
    name: "居间人",
    id: 1,
  },
  {
    imgIcon: getResource("img/phone/mini/8ic/2.png"),
    name: "工程公司",
    id: 2,
  },
  {
    imgIcon: getResource("img/phone/mini/8ic/3.png"),
    name: "物资工厂",
    id: 3,
  },
  {
    imgIcon: getResource("img/phone/mini/8ic/4.png"),
    name: "设计公司",
    id: 4,
  },
  {
    imgIcon: getResource("img/phone/mini/8ic/5.png"),
    name: "监理公司",
    id: 5,
  },
  {
    imgIcon: getResource("img/phone/mini/8ic/6.png"),
    name: "劳务公司",
    id: 6,
  },
  {
    imgIcon: getResource("img/phone/mini/8ic/7.png"),
    name: "贸易公司",
    id: 7,
  },
  {
    imgIcon: getResource("img/phone/mini/8ic/8.png"),
    name: "行业协会",
    id: 8,
  },
  {
    imgIcon: getResource("img/phone/mini/8ic/10.png"),
    name: "电力行业从业者",
    id: 11,
  },
  {
    imgIcon: getResource("img/phone/mini/8ic/9.png"),
    name: "求职者",
    id: 10,
  },
  {
    imgIcon: getResource("img/phone/mini/8ic/1.png"),
    name: "返回首页",
    id: 9,
  },
]);

// 计算属性过滤gridList
const filteredGridList = computed(() => {
  if (state.newregType == 0) {
    // 只显示居间人
    return gridList.filter(
      (item) => item.id == 1 || item.id == 9 || item.id == 10 || item.id == 11
    );
  } else if (state.newregType == "1") {
    // 显示除居间人外的所有选项
    return gridList.filter(
      (item) => item.id !== 1 && item.id !== 10 && item.id !== 11
    );
  }
  // 默认情况（可选）
  return gridList;
});

onLoad(async (e) => {
  state.newregType = e.type;
});

onShow(async () => {
  await init();
});

const init = async () => {
  try {
    const systemInfo = uni.getSystemInfoSync();
    const screenWidth = systemInfo.windowWidth;
    state.swiperHeight = screenWidth * 0.4875; // 按比例计算高度
    const res = await getBanner("1");
    dataList.value = res.data.map((item) => ({
      image: item.img_show,
      id: item.id,
      title: item.title,
      type: "image",
    }));
  } catch (error) {}
};

const iconClick = (e) => {
  if (e.id == 9) {
    uni.reLaunch({
      url: "/pages/index/index",
    });
  } else if (e.id == 10 || e.id == 11 || e.id == 1) {
    uni.navigateTo({
      url: "/pages/newsreg/personage?company_type=" + e.id,
    });
  } else {
    uni.navigateTo({
      url: "/pages/newsreg/gcgs?company_type=" + e.id,
    });
  }
};
</script>

<style></style>
